<template>
  <div class="text-sm font-bold mb-2 bg-[#7f8c8d] p-2">控制点信息</div>

  <!-- table -->
  <el-table :data="bets" border class="font-[consolas]" v-if="bets">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="btName" label="杆塔号" width="150" align="center" />
    <el-table-column prop="btSpan" label="档距" width="80" align="center" />

    <!-- 第1个控制点 -->
    <el-table-column prop="across[0].acrossName" label="跨越物名称" align="center" />
    <el-table-column prop="across[0].acrossX" label="X" width="80" align="center" />
    <el-table-column prop="across[0].acrossY" label="Y" width="80" align="center" />
    <el-table-column prop="across[0].controlHeight" label="控制距离" width="100" align="center" />

    <!-- 第2个控制点 -->
    <el-table-column prop="across[1].acrossName" label="跨越物名称" align="center" />
    <el-table-column prop="across[1].acrossX" label="X" width="80" align="center" />
    <el-table-column prop="across[1].acrossY" label="Y" width="80" align="center" />
    <el-table-column prop="across[1].controlHeight" label="控制距离" width="100" align="center" />
  </el-table>
</template>

<script setup lang="ts">
defineProps<{
  bets: BetViewModel[] | undefined
}>()
</script>

<style></style>
